<template>
    <view class="message" v-for="i in data">
        <view class="message-left">
            <image class="img" :src=mm></image>
        </view>
        <view class="message-right">
            <view class="name">{{ i.name }}</view>
            <view class="content">{{ i.content }}</view>
            <!--            <view class="image-grid">-->
            <!--                <view class="image-item" v-for="(image, index) in i.photo" :key="index">-->
            <!--                    <img :src="image" :alt="'Image ' + (index + 1)"/>-->
            <!--                </view>-->
            <!--            </view>-->
            <view :class="['image-grid', gridClass(i.photo)]">
                <view class="image-item" v-for="(image, index) in i.photo" :key="index">
                    <img :src="image" :alt="'Image ' + (index + 1)"/>
                </view>
            </view>
            <view class="comment">
                <uni-icons @click="onAdd(i.id)" style="color: #5a6a8b;" type="more-filled" size="30"></uni-icons>
                <view v-if="isAdd===i.id" class="comment-div">
                    <view class="div-left" @click="onLike">
                        <uni-icons v-if="like" style="color: #fff;" type="heart" size="20"></uni-icons>
                        <uni-icons v-else style="color: red;" type="heart-filled" size="20"></uni-icons>
                        <span>赞</span>
                    </view>
                    <span>|</span>
                    <view class="div-left">
                        <uni-icons style="color: #fff;" type="chat" size="20"></uni-icons>
                        <span>评论</span>
                    </view>
                </view>
            </view>
            <view class="leave-word">
                <view class="word-header">
                    <uni-icons style="color: #5a6a8b;" type="heart" size="20"></uni-icons>
                    aaa
                </view>
                <view class="word-content">
                    <view>
                        <span class="name">ikun</span> : 八年了
                    </view>
                    <view>
                        <span class="name">wyf</span> : 你知道我这八年是怎么过的吗？？？？？
                    </view>
                    <view>
                        <span class="name">wyf</span> : 你知道我这八年是怎么过的吗？？？？？
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import {defineProps, ref} from 'vue'
import mm from '../../../assets/images/moments2.png'

const props = defineProps<{
    title: string
}>()

function gridClass(photos: any) {
    if (!photos) return "";
    if (photos.length === 1) {
        return 'single-image';
    } else if (photos.length === 2) {
        return 'two-images';
    } else if (photos.length === 4) {
        return 'four-images';
    } else {
        return 'default';
    }
}

const isAdd = ref(0)
const like = ref(true)
const data = ref([
    {
        id: 1,
        name: "炸坤森",
        content: "炸坤森炸坤森炸坤森炸坤森炸坤森炸坤森",
        photo: [
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
        ],
    },
    {
        id: 2,
        name: "炸坤森",
        content: "炸坤森炸坤森炸坤森炸坤森炸坤森炸坤森sssssssssssssssssss",
        photo: [
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
        ],
    },
    {
        id: 3,
        name: "炸坤森",
        content: "炸坤森炸坤森炸坤森炸坤森炸坤森炸坤森",
        photo: [
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
        ],
    },
    {
        id: 4,
        name: "炸坤森",
        content: "炸坤森炸坤森炸坤森炸坤森炸坤森炸坤森",
        photo: [
            'https://via.placeholder.com/150',
        ],
    },
    {
        id: 5,
        name: "炸坤森",
        content: "炸坤森炸坤森炸坤森炸坤森炸坤森炸坤森",
        photo: "",
    },
    {
        id: 6,
        name: "炸坤森",
        content: "炸坤森炸坤森炸坤森炸坤森炸坤森炸坤森",
        photo: "",
    },

])
const onLike = () => {
    like.value = !like.value
}
const onAdd = (e: number) => {
    if (isAdd.value === e) return isAdd.value = 0
    isAdd.value = e
}
</script>
<style scoped>
.message {
    display: flex;
    background-color: #ffffff;
    padding: 16px;
    box-sizing: border-box;
    border-top: 1px solid #c8c7cc;
}

.message-left {
    width: 50px;
    margin-right: 5px;

    .img {
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
}

.message-right {
    flex-shrink: 0;
    width: 80%;

    .name {
        font-size: 18px;
        color: #2c4362;
    }

    .content {
        margin-bottom: 8px;
    }

    .image-grid {
        display: grid;
        gap: 8px;
    }

    .image-grid.single-image {
        grid-template-columns: 1fr;
    }

    .image-grid.two-images {
        grid-template-columns: repeat(2, 1fr);
    }

    .image-grid.four-images {
        grid-template-columns: repeat(2, 1fr);
    }

    .image-grid.default {
        grid-template-columns: repeat(3, 1fr);
    }

    .image-item {
        width: 100%;
        padding-top: 100%; /* 1:1 Aspect Ratio */
        position: relative;
    }

    .image-item img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .comment {
        margin-top: 15px;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;

        .comment-div {
            background-color: #4c4c4c;
            color: #FFF;
            display: flex;
            border-radius: 5px;
            line-height: 30px;

            view {
                width: 70px;
            }

            span {
                color: #7b7b7b;
            }

            .div-left {
                padding: 0 10px;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    color: #FFFFFF;
                    margin-left: 5px;
                }
            }
        }
    }

    .leave-word {
        width: 100%;
        padding: 5px 10px;
        background-color: #f7f7f7;
        line-height: 30px;
        border-radius: 5px;

        .word-header {
            /*display: flex;*/
            /*align-items: center;*/
        }

        .word-content {
            font-size: 18px;
            border-top: 1px solid #e6e6e6;

        }
    }
}


</style>

